<template>
  <div class="container">
    <div class="card">
      <div class="topp">
          <img style="width: 75px;" src="../../assets/jb/logo2.png" alt="">
          <p style="font-size:18px;color:#02A488">welcome !</p>
      </div>
      <div class="card-shadow">
        <div class="tab">
          <span :class="{ active: active === 1 }" @click="changeTab(1)">{{
            $t('pageSign.phone_reg')
          }}</span>
          <!-- <span :class="{ active: active === 2 }" @click="changeTab(2)">{{
            $t('pageSign.email_reg')
          }}</span> -->
        </div>
        <van-form label-width="4em" @submit="onSubmit">
          <van-field
            v-if="active === 1"
            v-model="username"
            :label="$t('pageSign.phone')"
            :placeholder="$t('pageSign.phone')"
            :rules="[{ validator: isPhone }]"
          >
            <div slot="input" class="slot-inp">
              <span class="tel-area" @click="showPicker=true">{{ area_num }} -</span>
              <input
                v-model="username"
                type="number"
                class="van-field__control"
                :placeholder="$t('pageSign.phone')"
              />
            </div>
          </van-field>
          <van-field
            v-else
            v-model="username"
            :label="$t('pageSign.email')"
            :placeholder="$t('pageSign.email')"
            :rules="[{ validator: isEmail }]"
          />
          <van-field
            v-model="verification_code"
            clearable
            :label="$t('pageSign.valid_code')"
            :placeholder="$t('pageSign.valid_code')"
            :rules="[{ required: true }]"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                block
                :disabled="times !== 60"
                @click.prevent="handleGetCode"
              >
                <template v-if="times === 60">{{ $t('pageSign.send_code') }}</template>
                <template v-else>{{ times }}s</template>
              </van-button>
            </template>
          </van-field>
          <van-field
            v-model="password"
            type="password"
            :label="$t('pageSign.pwd')"
            :placeholder="$t('pageSign.pwd')"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="confirm_password"
            type="password"
            :label="$t('pageSign.confirm_pwd')"
            :placeholder="$t('pageSign.pwd')"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="invitation_code"
            :label="$t('pageSign.invitation_code')"
            :placeholder="$t('pageSign.invitation_code')"
          />
          <van-checkbox v-model="checked" icon-size="16" class="checkbox-link">
            {{ $t('pageSign.agreed')
            }}<a @click.stop="goAgreement">{{ $t('pageSign.agreement') }}</a>
          </van-checkbox>
          <van-button block type="info" native-type="submit" class="submit" :disabled="!checked">
            {{ $t('sign_up') }}
          </van-button>
          <div class="links">
            <nuxt-link to="/sign/login">{{ $t('pageSign.has_account') }}</nuxt-link>
          </div>
        </van-form>
      </div>
    </div>
    <van-popup v-model="showPicker" position="bottom" round>
      <van-picker show-toolbar :columns="areaNums" :visible-item-count="10" @confirm="confirmArea" @cancel="showPicker=false" />
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import storage from '@/utils/storage'
import { areaNums } from '@/constants/area_nums'
import { isPhone, isEmail } from '@/utils/validator'
export default {
  data () {
    return {
      areaNums,
      logo: require('@/assets/images/login_logo.png'),
      active: 1,
      username: '',
      password: '',
      confirm_password: '',
      verification_code: '',
      invitation_code: '',
      checked: false,
      times: 60,
      area_num: '86',
      showPicker: false
    }
  },
  computed: {
    ...mapState({
      initInfo: index => index.initInfo
    })
  },
  mounted () {
    let regInfo = storage.get('regInfo')
    if (regInfo) {
      regInfo = JSON.parse(regInfo)
      this.active = regInfo.active
      this.username = regInfo.username
      this.password = regInfo.password
      this.confirm_password = regInfo.confirm_password
      this.verification_code = regInfo.verification_code
      this.invitation_code = regInfo.invitation_code
      this.$nextTick(() => { storage.remove('regInfo') })
    }
  },
  methods: {
    ...mapActions({
      getCode: 'user/getCode',
      register: 'user/register'
    }),
    isPhone,
    isEmail,
    changeTab (index) {
      this.active = index
      this.username = ''
    },
    onSubmit (e) {
      if (this.password !== this.confirm_password) {
        this.$toast(this.$t('pageSign.pwd_err'))
        return false
      }
      const username = this.active === 1
        ? `${this.area_num}-${this.username}`
        : this.username
      const payload = {
        username,
        password: this.password,
        verification_code: this.verification_code
      }
      if (this.invitation_code) { payload.invitation_code = this.invitation_code }
      this.$toast.loading()
      this.register(payload).then((res) => {
        this.$toast(res.msg)
        this.$router.replace('/sign/login')
      }).catch((res) => {
        this.$toast(res.msg)
      })
    },
    handleGetCode () {
      const username = this.active === 1
        ? `${this.area_num}-${this.username}`
        : this.username
      this.$toast.loading()
      this.getCode(username).then(({ msg }) => {
        this.$toast(msg)
        this.getTime()
      }).catch(({ msg }) => {
        this.$toast(msg)
      })
    },
    getTime () {
      this.timer = setInterval(() => {
        this.times--
        if (this.times === 0) {
          clearInterval(this.timer)
          this.times = 60
        }
      }, 1000)
    },
    goAgreement () {
      const regInfo = {
        active: this.active,
        username: this.username,
        password: this.password,
        confirm_password: this.confirm_password,
        verification_code: this.verification_code,
        invitation_code: this.invitation_code
      }
      storage.set('regInfo', JSON.stringify(regInfo))
      this.$router.push({
        name: 'common-article',
        params: {
          url: this.initInfo.system_user_agreement,
          title: '用户协议'
        }
      })
    },
    confirmArea (values) {
      this.area_num = values.phone_code
      this.showPicker = false
    }
  }
}
</script>

<style scoped lang="less">
.topp{
  height:100px;display:flex;
  flex-direction: column;margin-top: 465px;
  }
.container {
  height: 100vh;
   margin:10px 0px ;
      background:url('../../assets/jb/deng.jpg') ;
      background-size:100% 100%;
}
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-8%);
}
.card-shadow {
  width: 90vw;
  padding: 10vw 5vw;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 10px 10px 50px -20px rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.form-title {
  color: #ffffff;
  margin-bottom: 30px;
  font-weight: 500;
  text-align: center;
}
/deep/ .van-field {
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.submit {
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.divider {
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 16px;
  margin: 0 10px;
  background-color: #eee;
  transform: scaleX(0.5);
}
.links {
  text-align: center;
  a {
    color: @themeColor;
  }
}
.checkbox-link {
  font-size: 12px;
  margin-bottom: 15px;
  a {
    color: @themeColor;
  }
}
.tab {
  margin-bottom: 30px;
  color: #333;
  display: flex;
  text-align: center;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  span {
    cursor: pointer;
    transition: 0.3s;
    &::after {
      content: '';
      position: absolute;
      top: 120%;
      left: 50%;
      width: 20px;
      height: 2px;
      margin-left: -10px;
      transition: 0.3s;
    }
  }
  .active {
    position: relative;
    transform: scale(1.2);
    &::after {
      background-color: @themeColor;
    }
  }
}
.slot-inp {
  display: flex;
  align-items: center;
}
.tel-area {
  flex-shrink: 0;
  color: #666;
  margin-right: 5px;
}
</style>
